<template>
  <div class="app-container">
    <el-descriptions v-if="processcardCode && workNum" direction="vertical" :column="1" border style="flex: 1;">
      <el-descriptions-item label="批次号">
        <template slot="label">
          <div style="width: 100%;text-align: center;font-size: 50px;">
            批次号
          </div>
        </template>
        <div style="width: 100%;text-align: center;font-size: 50px;">
          {{ processcardCode }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="工程号">
        <template slot="label">
          <div style="width: 100%;text-align: center;font-size: 50px;">
            工程号
          </div>
        </template>
        <div style="width: 100%;text-align: center;font-size: 50px;">
          {{ workNum }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <img :src="image" alt="" class="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: '',
      processcardCode: '',
      workNum: ''
    }
  },
  created() {
    this.processcardCode = this.$route.query.processcardCode
    this.workNum = this.$route.query.workNum
  },
  mounted() {
    this.$nextTick(() => {
      this.image = window.localStorage.getItem('image')
    })
    window.addEventListener('storage', (e) => {
      // console.log("别的浏览器页签storage发生变化:", e)
      // this.image = e.newValue
      this.image = window.localStorage.getItem('image')
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.image {
  // width: 100%;
  flex: 3;
  height: 100%;
}
</style>
